<template>
  <div class="mod-config" style="display: -webkit-flex;justify-content: center;">
    <el-form :inline="true" :model="dataForm" class="cash-form">
      <el-row>
        <el-form-item label="收银店铺">
          <el-select v-model="dataForm.shopId">
            <el-option
              v-for="item in shops"
              :key="item.id"
              :label="item.shopName"
              :value="item.id"
              :disabled="item.status !== 1"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="init()">下一单</el-button>
          <span style="font-size: 10px;font-weight: 300;">备注:只有公司管理员和店铺员工可收银</span>
        </el-form-item>
        <el-form-item label="操作员:" style="float: right;">
          <span>{{ username }}</span>
        </el-form-item>
      </el-row>
      <el-row class="order-info-row">
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单号:">
              <span>{{ dataForm.sn }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开单员">
              <el-select v-model="dataForm.kaidanUserId">
                <el-option
                  v-for="item in kaidanUsers"
                  :key="item.id"
                  :label="item.name + '-' + item.mobile"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item>
              <el-button
                type="primary"
                @click="scanVipCard"
                :disabled="this.dataForm.goodsList.length > 0 || dataForm.shopId == null"
              >扫描会员码</el-button>
              <el-button
                type="primary"
                @click="vipCardHandle()"
                :disabled="this.dataForm.goodsList.length > 0  || dataForm.shopId == null"
              >查找会员</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="顾客类型">
              <el-select
                v-model="dataForm.vipCard.cardType"
                placeholder="请选择"
                @change="cardTypeChange"
              >
                <el-option
                  v-for="item in cardTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.value !== 4"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="顾客姓名:">
              <span>{{ dataForm.vipCard.memberName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话:">
              <span>{{ dataForm.vipCard.memberMobile }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="会员卡号:">
              <span>{{ dataForm.vipCard.cardNo }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-row>
      <el-row class="vip-card-info-row">
        <el-col :span="6">
          <el-form-item label="卡积分:">
            <span>{{ dataForm.vipCard.cardPoints }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="卡余额:">
            <span>{{ dataForm.vipCard.cardBalance }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="次数剩余:">
            <span>{{ dataForm.vipCard.cardTimes }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="到期期限:">
            <span
              v-if="dataForm.vipCard.expireTime"
            >{{ dateFormat(dataForm.vipCard.expireTime, 'YYYY-MM-DD') }}</span>
            <span v-else>无限期</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="button-row">
        <el-col :span="6">
          <el-button
            type="primary"
            @click="addGoodsHandle()"
            :disabled="addGoodsDisabled || dataForm.shopId == null"
          >添加商品</el-button>
        </el-col>
        <el-col :span="6">
          <el-button
            type="success"
            icon="el-icon-check"
            @click="dataFormSubmit()"
            :disabled="disabled || this.dataForm.goodsList.length == 0"
          >确定收银</el-button>
          <br />
          <span style="font-size: 10px;font-weight: 300; color: red;">请确认收银商品数量无误</span>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-checkbox v-model="dataForm.posChecked">打印小票</el-checkbox>
          </el-form-item>
          <el-button @click="print()">手动打印小票</el-button>
        </el-col>
      </el-row>
      <el-row class="table-row">
        <el-table
          :data="dataForm.goodsList"
          border
          style="width: 100%;"
          :header-cell-style="{ background: '#17b3a3', color: '#fff' }"
        >
          <el-table-column prop="goodsName" header-align="center" align="center" label="商品名称"></el-table-column>
          <el-table-column prop="catName" header-align="center" align="center" label="商品类型"></el-table-column>
          <el-table-column prop="goodsPrice" header-align="center" align="center" label="单价">
            <!-- <template slot-scope="{ row }">
              <el-input v-model="row.goodsPrice" :change="handlePrice(row)"></el-input>
            </template>-->
          </el-table-column>
          <el-table-column header-align="center" align="center" label="折扣率">
            <template slot-scope="scope">
              <span>{{ scope.row.goodsDiscount + '%'}}</span>
            </template>
          </el-table-column>
          <el-table-column header-align="center" align="center" label="数量">
            <template slot-scope="{ row }">
              <el-input
                v-model="row.num"
                :change="handleInput(row)"
                class="goods-price"
                style="color: red;"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column header-align="center" align="center" label="可用卡类型">
            <template slot-scope="scope">
              <span>{{ getCardTypeStr(scope.row.cardType) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="amount" header-align="center" align="center" label="合计"></el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="150"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="danger" size="small" @click="deleteGoods(scope.$index)">X</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="商品合计:">
            <span>{{ dataForm.orderAmount }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="余额抵扣:">
            <span>{{ dataForm.balanceAmount }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="积分抵扣:">
            <span>{{ dataForm.pointsAmount }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="实付:">
            <span>{{ dataForm.payAmount }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="赠送积分:">
            <span>{{ dataForm.pointsGive }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 添加商品弹窗 -->
    <GoodsAdd
      ref="goodsAdd"
      v-if="goodsAddVisible"
      :companyId="dataForm.companyId"
      :shopId="dataForm.shopId"
      :cardType="dataForm.vipCard.cardType"
      @add-goods-callback="addGoodsCallback"
      @cancel="addGoodsCancel"
    ></GoodsAdd>
    <!-- 查找会员弹窗 -->
    <VipCard
      ref="vipCard"
      v-if="vipCardVisible"
      :companyId="dataForm.companyId"
      @confirm="vipCardConfirm"
      @cancel="vipCardCancel"
    ></VipCard>
    <!-- 打印 -->
    <section ref="print" class="print" v-show="printVisible">
      <div style="margin: 0;">
        <template v-for="shop in shops">
          <h1 :key="shop.id" v-if="dataForm.shopId == shop.id">{{ shop.shopName }}</h1>
        </template>
        <el-row style="border-bottom: 1px dashed #000000 ;">
          <p>操作员：{{ username }}</p>
          <p>订单号：{{ dataForm.sn }}</p>
          <p>时间：{{ dateFormat(new Date().getTime(), 'YYYY-MM-DD HH:mm:SS') }}</p>
        </el-row>
        <el-row style="border-bottom: 1px dashed #000000; padding: 10px 0;">
          <el-row style="margin-bottom: 5px;">
            <el-col :span="6">名称</el-col>
            <el-col :span="3">数量</el-col>
            <el-col :span="5">单价</el-col>
            <el-col :span="5">折扣价</el-col>
            <el-col :span="5">小计</el-col>
          </el-row>
          <el-row v-for="(goods, index) in dataForm.goodsList" :key="index" class="goods-info">
            <el-row>{{ goods.goodsName }}</el-row>
            <el-row>
              <el-col :span="6">
                <span>&nbsp;</span>
              </el-col>
              <el-col :span="3">{{ goods.num }}</el-col>
              <el-col :span="5">{{ goods.goodsPrice }}</el-col>
              <el-col :span="5">{{ goods.discountPrice }}</el-col>
              <el-col :span="5">{{ goods.amount }}</el-col>
            </el-row>
          </el-row>
        </el-row>
        <el-row>
          <p>商品合计：{{ dataForm.orderAmount }}</p>
          <p>卡类型：{{ getCardType() }}</p>
          <p>积分抵扣：{{ dataForm.pointsAmount }}</p>
          <p>余额抵扣：{{ dataForm.balanceAmount }}</p>
          <h2>实收金额：{{ dataForm.payAmount }}</h2>
          <h2>赠送积分：{{ dataForm.pointsGive }}</h2>
          <p style="text-align: center;font-size: 10px;">请保留小票以保障您的权益</p>
          <p style="text-align: center;font-size: 10px;">谢谢惠顾,欢迎下次光临</p>
        </el-row>
      </div>
    </section>
  </div>
</template>

<script>
import { getCompanys, getKaidanUsers } from "@/utils";
import $ from "jquery";
import GoodsAdd from "./goods/goods-add";
import VipCard from "./member/vipCardList";
export default {
  data() {
    return {
      goodsAddVisible: false,
      vipCardVisible: false,
      printVisible: false,
      disabled: false,
      addGoodsDisabled: false,
      pointsToAmount: null, // 积分-金额比例
      dataForm: {
        // 商品列表
        sn: "",
        companyId: null,
        shopId: null,
        kaidanUserId: null,
        // 是否打印小票
        posChecked: true,
        // 会员卡信息
        vipCard: {
          id: null,
          cardNo: "",
          cardType: 4,
          cardPoins: null,
          cardBalance: null,
          cardTimes: null,
          memberName: "",
          memberMobile: "",
          expireTime: null
        },
        goodsList: [],
        orderAmount: 0, // 商品合计
        balanceAmount: 0, // 余额抵扣
        points: 0, // 积分抵扣
        pointsAmount: 0, // 积分抵扣金额
        payAmount: 0, // 实付
        pointsGive: 0 // 赠送积分
      },
      cardTypes: [
        {
          label: "次卡",
          value: 1
        },
        {
          label: "充值卡",
          value: 2
        },
        {
          label: "积分卡",
          value: 3
        },
        {
          label: "散客",
          value: 4
        }
      ],
      username: "",
      shops: [],
      kaidanUsers: [],
      isStart: false,
      code: "",
      loading: null,
      lastTime: ""
    };
  },
  components: {
    GoodsAdd,
    VipCard
  },
  activated() {
    this.getUserInfo();
    this.getShops();
    this.newOrderSn();
  },
  methods: {
    // 初始化
    init() {
      this.dataForm = {
        sn: "",
        companyId: this.dataForm.companyId,
        shopId: this.dataForm.shopId,
        kaidanUserId: null,
        // 是否打印小票
        posChecked: true,
        // 会员卡信息
        vipCard: {
          id: null,
          cardNo: "",
          cardType: 4,
          cardPoints: null,
          cardBalance: null,
          cardTimes: null,
          memberName: "",
          memberMobile: "",
          expireTime: null
        },
        // 商品列表
        goodsList: [],
        orderAmount: 0, // 商品合计
        balanceAmount: 0, // 余额抵扣
        points: 0, // 积分抵扣
        pointsAmount: 0,
        payAmount: 0, // 实付
        pointsGive: 0 // 赠送积分
      };
      // 获取新订单号
      this.newOrderSn();
      this.disabled = false;
      this.addGoodsDisabled = false;
    },
    // 获取最新订单号
    newOrderSn() {
      this.$http({
        url: this.$http.adornUrl("/cash/order/newOrderSn"),
        method: "get",
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataForm.sn = data.data;
        }
      });
    },
    // 顾客类型值改变事件
    cardTypeChange(val) {
      if (val === 4) {
        this.dataForm.vipCard = {
          id: null,
          cardNo: "",
          cardType: 4,
          cardPoints: null,
          cardBalance: null,
          cardTimes: null,
          memberName: "",
          memberMobile: "",
          expireTime: null
        };
      }
    },
    // 获取当前登录用户的店铺列表
    getShops() {
      this.shops = [];
      this.$http({
        url: this.$http.adornUrl("/cash/order/getShops"),
        method: "get",
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        if (data && data.code === 0 && data.data.length > 0) {
          this.shops = data.data;
          this.dataForm.shopId = this.shops[0].id;
          this.dataForm.companyId = this.shops[0].companyId;
          getKaidanUsers(this.dataForm.companyId ,list => {
            this.kaidanUsers = list;
          });
          this.getPointsToAmount();
        }
      });
    },
    // 新增商品操作
    addGoodsHandle() {
      if (this.dataForm.shopId == null) {
        this.$message.error("请先选择收银店铺");
        return;
      }
      this.goodsAddVisible = true;
      this.$nextTick(() => {
        this.$refs.goodsAdd.init();
      });
    },
    // 添加商品弹窗取消
    addGoodsCancel() {
      this.goodsAddVisible = false;
    },
    // 添加商品回调
    addGoodsCallback(goodsList) {
      if (!goodsList || goodsList.length == 0) {
        return;
      }
      goodsList.forEach(goods => {
        let flag = false;
        this.dataForm.goodsList.forEach(item => {
          if (goods.id == item.id) {
            flag = true;
            return false;
          }
        });
        if (flag) {
          return false;
        }
        this.$set(goods, "num", 1);
        this.$set(goods, "amount", goods.discountPrice);
        this.$set(goods, "edit", true);
        this.dataForm.goodsList.push(goods);
      });
      this.goodsAddVisible = false;
    },
    // 查找会员弹窗
    vipCardHandle() {
      if (this.dataForm.shopId == null) {
        this.$message.error("请选择收银店铺");
        return false;
      }
      this.vipCardVisible = true;
      this.$nextTick(() => {
        this.$refs.vipCard.init();
      });
    },
    // 查找会员确定回调事件
    vipCardConfirm(vipCard) {
      this.vipCardVisible = false;
      if (vipCard == null || vipCard.id == null) {
        return;
      }
      this.dataForm.vipCard = vipCard;
    },
    // 查找会员取消回调事件
    vipCardCancel() {
      this.vipCardVisible = false;
    },
    scanVipCard(e) {
      console.log("Start Scan");
      this.loading = this.$loading({
        // target: document.querySelector('.cashForm'),
        lock: true,
        text: "请扫码",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
        customClass: "cash-loading"
      });

      e.target.blur(); //按钮对象失去焦点，扫码会默认带一个Enter键，会再次触发click
      if (!this.isStart) {
        this._scanner = this.$scanner({
          callback: v => {
            this.code += v;
          }
        });
      } else {
        this._scanner.cancel();
        if (this.loading != null) {
          this.loading.close();
        }
        console.log(this.code);
        let code = this.code;
        if (code != "") {
          this.getVipCard(code);
        } else {
          this.isStart = true;
        }
        this.code = "";
      }
      this.isStart = !this.isStart;
    },
    // 扫描会员码
    getVipCard(code) {
      // 查找会员
      this.$http({
        url: this.$http.adornUrl("/member/vipCard/getByNo"),
        method: "get",
        params: this.$http.adornParams({
          cardNo: code
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          var vipCard = data.data;
          console.log(this.dataForm.companyId, vipCard.companyId);
          if (vipCard.companyId != this.dataForm.companyId) {
            this.$message.error("会员卡不属于该公司");
          }
          this.dataForm.vipCard = data.data;
        } else {
          this.$message.error("没有会员");
        }
      });
    },
    // 打印小票
    print() {
      this.printVisible = true;
      this.$nextTick(() => {
        this.$print(this.$refs.print);
        this.printVisible = false;
      });
    },
    // 删除商品
    deleteGoods(index) {
      this.dataForm.goodsList.splice(index, 1);
      this.calDataFormData();
    },
    // 确定收银
    dataFormSubmit() {
      if (!this.dataForm.shopId || this.dataForm.shopId == null) {
        this.$message.error("请选择收银店铺");
        return;
      }
      if (!this.dataForm.goodsList || this.dataForm.goodsList.length == 0) {
        this.$message.error("请添加商品");
        return;
      }
      let glength = this.dataForm.goodsList.length;
      for (let i = 0; i < glength; i++) {
        let goods = this.dataForm.goodsList[i];
        if (!goods.num || goods.num <= 0) {
          this.$message.error("商品数量必须大于0");
          return;
        }
      }
      this.disabled = true;
      const loading = this.$loading({
        lock: true,
        text: "正在收银中，请稍后",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      this.$http({
        url: this.$http.adornUrl("/cash/order/save"),
        method: "post",
        data: this.$http.adornData(this.dataForm)
      })
        .then(({ data }) => {
          loading.close();
          if (data && data.code === 0) {
            this.addGoodsDisabled = true;
            this.$message.success("收银成功");
            // TODO 是否打印小票
            if (this.dataForm.posChecked) {
              this.$nextTick(() => {
                this.print();
              });
            }
          } else {
            this.disabled = false;
            this.$message.error(data.msg);
          }
        })
        .catch(() => {
          loading.close();
          this.disabled = false;
        });
    },
    // 数字输入检查
    handleInput(row) {
      var num = row.num + "";
      num = num.replace(/[^\d]/g, ""); // 清除“数字”和“.”以外的字符
      if (num.indexOf(".") < 0 && num != "") {
        // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        num = parseInt(num);
      } else if (num == "" || num == undefined || num == null) {
        num = 0;
      }
      row.num = num;
      // 数字改变 计算当前总值变化
      row.amount = this.floatObj.multiply(row.discountPrice, row.num);
      this.calDataFormData();
    },
    // 价格输入检查
    handlePrice(row) {
      var oldPrice = row.goodsPrice;
      var goodsPrice = row.goodsPrice + "";
      // goodsPrice = goodsPrice.match(/^\d*(\.?\d{0,2})/g)[0] || null; // 清除“数字”和“.”以外的字符
      goodsPrice = goodsPrice.match(/^\d*(\.?\d{0,2})/g)[0] || "";
      if (goodsPrice == "" || goodsPrice == undefined || goodsPrice == null) {
        goodsPrice = oldPrice;
      }
      // goodsPrice = parseFloat(goodsPrice);
      row.goodsPrice = goodsPrice;
      // 数字改变 计算当前总值变化
      row.amount = this.floatObj.multiply(row.goodsPrice, row.num);
      this.calDataFormData();
    },
    calDataFormData() {
      // 计算其他信息
      var orderAmount = 0;
      var balanceAmount = 0;
      var points = 0;
      var pointsAmount = 0;
      var pointsGive = 0;
      var payAmount = 0;
      if (this.dataForm.goodsList.length == 0) {
        this.dataForm.orderAmount = orderAmount;
        this.dataForm.balanceAmount = balanceAmount;
        this.dataForm.points = points;
        this.dataForm.pointsAmount = pointsAmount;
        this.dataForm.pointsGive = pointsGive;
        this.dataForm.payAmount = payAmount;
        return;
      }
      // 首先计算商品合计
      this.dataForm.goodsList.forEach(goods => {
        orderAmount = this.floatObj.add(orderAmount, goods.amount);
      });
      if (orderAmount <= 0) {
        this.dataForm.orderAmount = orderAmount;
        this.dataForm.balanceAmount = balanceAmount;
        this.dataForm.points = points;
        this.dataForm.pointsAmount = pointsAmount;
        this.dataForm.pointsGive = pointsGive;
        this.dataForm.payAmount = payAmount;
        return;
      }
      // 判断卡类型
      var cardType = this.dataForm.vipCard.cardType;
      if (cardType == 2) {
        // 充值卡
        if (this.dataForm.vipCard.cardBalance <= orderAmount) {
          // 余额比商品合计小 全部余额抵扣
          balanceAmount = this.dataForm.vipCard.cardBalance;
          // 实付金额 = 商品合计 - 余额抵扣金额
          // payAmount = orderAmount - balanceAmount;
          payAmount = this.floatObj.subtract(orderAmount, balanceAmount);
        } else {
          // 余额比商品合计多 抵扣商品合计
          balanceAmount = orderAmount;
        }
      } else if (cardType == 3) {
        // 积分卡 计算积分抵扣金额
        // 首先计算出积分换算的金额
        pointsAmount = this.floatObj.multiply(
          this.dataForm.vipCard.cardPoints,
          this.pointsToAmount
        );

        if (pointsAmount <= orderAmount) {
          // 积分金额比商品合计小
          points = this.dataForm.vipCard.cardPoints;
          // 实付金额 = 商品合计 - 积分抵扣金额
          // payAmount = orderAmount - pointsAmount;
          payAmount = this.floatObj.subtract(orderAmount, pointsAmount);
          // 消费一元赠送一个积分
          pointsGive = parseInt(this.floatObj.multiply(payAmount, 1, 0));
        } else {
          // 积分金额比商品合计多 直接消费积分
          points =
            this.dataForm.vipCard.cardPoints -
            this.floatObj.divide(orderAmount, this.pointsToAmount);
        }
      } else if (cardType == 4) {
        // 散客 实付 = 商品合计
        payAmount = orderAmount;
      }
      this.dataForm.orderAmount = orderAmount;
      this.dataForm.balanceAmount = balanceAmount;
      this.dataForm.points = points;
      this.dataForm.pointsAmount = pointsAmount;
      this.dataForm.pointsGive = pointsGive;
      this.dataForm.payAmount = payAmount;
    },
    // 展现结账限制卡类型
    getCardTypeStr(cardType) {
      var str = "";
      if (cardType == null || cardType == "" || cardType == undefined) {
        return str;
      }
      var cardTypeList = cardType.split(",");
      cardTypeList.forEach(item => {
        this.cardTypes.forEach(item1 => {
          if (item == item1.value) {
            str += "," + item1.label;
            return;
          }
        });
      });
      return str.substring(1, str.length);
    },
    // 获取当前登录用户信息
    getUserInfo() {
      this.$http({
        url: this.$http.adornUrl("/cash/order/getUserInfo"),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.username = data.data;
        }
      });
    },
    // 获取积分-金额比例
    getPointsToAmount() {
      if (!this.dataForm.companyId) {
        return;
      }
      this.$http({
        url: this.$http.adornUrl(
          `/member/vipCard/rule/detail/${this.dataForm.companyId}`
        ),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.pointsToAmount = data.item.pointsAmount;
        }
      });
    },
    getCardType() {
      var str = "散客";
      for (var i = 0; i < this.cardTypes.length; i++) {
        var item = this.cardTypes[i];
        if (this.dataForm.vipCard.cardType == item.value) {
          str = item.label;
          break;
        }
      }
      return str;
    }
  }
};
</script>
<style scoped lang="scss">
.cash-form {
  width: 90%;
  min-height: 710px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  > .el-row {
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 5px;
  }

  .table-row {
    margin-top: 20px;
    border-bottom: none !important;

    .goods-price >>> .el-input__inner {
      color: red;
    }
  }

  .vip-card-info-row {
    .el-form-item {
      margin-bottom: 5px;
    }
  }

  .button-row {
    padding-bottom: 5px;

    .el-form-item {
      margin-bottom: 0;
    }
  }
}

.print {
  color: #000000;
  font-size: 5px;

  p {
    line-height: 10px;
  }
  h1 {
    text-align: center;
  }

  .goods-info {
    font-size: 3px;
  }
}
</style>
